<template>
  <div class="image-upload-page">
    <!-- 页面标题 -->
    <div class="header-section">
      <div class="title">✨ 小红书爆款生成器 ✨</div>
      <div class="desc">
        截图一张您看中的产品图片进行上传，等待系统生成完成
      </div>
    </div>

    <!-- 装饰元素 -->
    <div class="decoration">
      <div class="decoration-item heart"></div>
      <div class="decoration-item star"></div>
      <div class="decoration-item flower"></div>
    </div>

    <!-- 图片上传区域 -->
    <div class="upload-section">
      <div class="upload-instruction">
        <i class="el-icon-picture-outline"></i>
        <p class="instruction-text">点击或拖拽产品图片到此处上传</p>
        <p class="sub-text">支持JPG/PNG格式，大小不超过2MB</p>
      </div>

      <div class="upload-container">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :headers="uploadHeaders"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
          :show-file-list="false"
          :auto-upload="true"
        >
          <div class="upload-icon-container">
            <i class="el-icon-camera" :class="{ 'pulse': isUploading }"></i>
          </div>
          <div class="upload-text">
            <div class="upload-main-text">上传产品图片</div>
            <div class="upload-sub-text">生成专属小红书爆款内容</div>
          </div>
        </el-upload>
      </div>

      <div class="upload-tips">
        <p><i class="el-icon-lightning"></i> 热门技巧：上传清晰、美观的产品图，生成效果更佳！</p>
      </div>
    </div>

    <!-- 图片展示区域 -->
    <div class="image-preview-section" v-if="resultImageUrl">
      <div class="section-header">
        <div class="section-title">
          <i class="el-icon-sunny"></i> 生成结果
        </div>
        <div class="action-buttons">
          <el-button
            type="primary"
            class="regenerate-btn"
            @click="reGenerate"
            :loading="regenerating"
            circle
          >
            <i class="el-icon-refresh"></i>
          </el-button>
          <el-button
            type="success"
            class="download-btn"
            @click="downloadImage"
            circle
          >
            <i class="el-icon-download"></i>
          </el-button>
        </div>
      </div>

      <div class="image-container" @click="togglePreview">
        <div class="glow-effect" :class="{ 'active': isPreviewing }"></div>
        <el-image
          :src="resultImageUrl"
          class="result-image"
          fit="contain"
          :preview-src-list="[resultImageUrl]"
        >
          <div slot="placeholder" class="image-slot">
            <div class="loading-spinner">
              <div class="spinner"></div>
              <span>生成中...</span>
            </div>
          </div>
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div class="preview-overlay" v-if="isPreviewing">
          <p>点击图片返回</p>
        </div>
      </div>

      <div class="marketing-info">
        <div class="info-header">
          <i class="el-icon-chat-line-round"></i> 爆款文案建议
        </div>
        <div class="suggestion-container">
          <p class="suggestion-text">{{ marketingSuggestion }}</p>
          <div class="copy-btn" @click="copySuggestion">
            <i class="el-icon-document-copy"></i> 复制
          </div>
        </div>
      </div>

      <div class="share-section">
        <p class="share-text">分享到小红书：</p>
        <div class="social-icons">
          <div class="social-icon xhs">
            <!-- 替换为内联SVG图标，移除对iconfont.css的依赖 -->
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M512 1024C229.22 1024 0 794.78 0 512S229.22 0 512 0s512 229.22 512 512-229.22 512-512 512zM427.65 310.02h168.7c10.09 0 18.26 8.17 18.26 18.26v367.44c0 10.09-8.17 18.26-18.26 18.26h-168.7c-10.09 0-18.26-8.17-18.26-18.26V328.28c0-10.09 8.17-18.26 18.26-18.26zm313.41 0h168.7c10.09 0 18.26 8.17 18.26 18.26v367.44c0 10.09-8.17 18.26-18.26 18.26h-168.7c-10.09 0-18.26-8.17-18.26-18.26V328.28c0-10.09 8.17-18.26 18.26-18.26z" fill="currentColor"/>
            </svg>
          </div>
          <div class="social-icon wechat">
            <i class="el-icon-wechat"></i>
          </div>
          <div class="social-icon weibo">
            <i class="el-icon-sunset"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 手机端优化提示 -->
    <div class="mobile-tip" v-if="isMobile">
      <i class="el-icon-mobile-phone"></i> 您正在使用手机，点击图片可查看大图
    </div>

    <!-- 动态效果 -->
    <div class="floating-elements">
      <div class="floating-element" v-for="i in 5" :key="i" :style="getFloatingStyle(i)"></div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { isMobile } from "@/utils";

// Deleted:import "@/assets/icons/iconfont.css"; // 移除对不存在的iconfont.css的依赖

export default {
  data() {
    return {
      // 上传地址
      uploadUrl: process.env.VUE_APP_BASE_API + "/community/image/process",
      // 上传headers
      uploadHeaders: {
        Authorization: "Bearer " + getToken()
      },
      // 处理后的图片URL
      resultImageUrl: "",
      // 营销文案建议
      marketingSuggestion: "系统正在为您生成吸引人的小红书营销文案...",
      // 是否正在重新生成
      regenerating: false,
      // 是否为移动设备
      isMobile: isMobile(),
      // 保存原始文件用于重新生成
      originalFile: null,
      // 是否正在上传
      isUploading: false,
      // 是否正在预览大图
      isPreviewing: false
    };
  },
  created() {
    // 检查是否为移动设备
    this.isMobile = isMobile();
  },
  methods: {
    // 生成浮动元素的随机样式
    getFloatingStyle(index) {
      const size = 10 + Math.random() * 20;
      const left = Math.random() * 100;
      const delay = Math.random() * 5;
      const duration = 15 + Math.random() * 10;

      return {
        width: `${size}px`,
        height: `${size}px`,
        left: `${left}%`,
        animationDelay: `${delay}s`,
        animationDuration: `${duration}s`
      };
    },

    // 切换预览状态
    togglePreview() {
      this.isPreviewing = !this.isPreviewing;
    },

    // 复制文案建议
    copySuggestion() {
      navigator.clipboard.writeText(this.marketingSuggestion).then(() => {
        this.$message({
          message: '文案已复制到剪贴板',
          type: 'success',
          duration: 1500
        });
      }).catch(err => {
        console.error('复制失败:', err);
        this.$message({
          message: '复制失败，请手动复制',
          type: 'error',
          duration: 2000
        });
      });
    },

    // 上传前检查
    beforeUpload(file) {
      this.originalFile = file;
      this.isUploading = true;

      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message({
          message: '上传图片只能是 JPG/PNG 格式!',
          type: 'error',
          duration: 2000
        });
      }
      if (!isLt2M) {
        this.$message({
          message: '上传图片大小不能超过 2MB!',
          type: 'error',
          duration: 2000
        });
      }
      return isJPG && isLt2M;
    },

    // 上传成功处理
    handleSuccess(response, file, fileList) {
      this.isUploading = false;
      setTimeout(() => {
        if (response.code === 200) {
          // 假设后端返回的是处理后的图片URL和营销文案
          this.resultImageUrl = process.env.VUE_APP_BASE_API + response.data.url;
          this.marketingSuggestion = response.data.suggestion || "这款产品真的太棒了！分享给大家，绝对值得入手～ #好物分享 #小红书爆款";
          this.$message({
            message: '图片处理成功！',
            type: 'success',
            duration: 1500
          });
        } else {
          this.$message({
            message: response.msg || '图片处理失败',
            type: 'error',
            duration: 2000
          });
        }
      }, 800); // 添加一点延迟，让加载动画更自然
    },

    // 上传失败处理
    handleError(error, file, fileList) {
      this.isUploading = false;
      this.$message({
        message: '图片上传失败，请重试',
        type: 'error',
        duration: 2000
      });
    },

    // 重新生成图片
    reGenerate() {
      if (!this.originalFile) {
        this.$message({
          message: '请先上传图片',
          type: 'warning',
          duration: 1500
        });
        return;
      }

      this.regenerating = true;
      this.resultImageUrl = "";
      this.marketingSuggestion = "✨ 正在重新生成，请稍候... ✨";

      // 创建新的FormData
      const formData = new FormData();
      formData.append('file', this.originalFile);

      // 手动发送请求
      this.$http.post('/community/image/process', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: "Bearer " + getToken()
        }
      }).then(response => {
        if (response.code === 200) {
          this.resultImageUrl = process.env.VUE_APP_BASE_API + response.data.url;
          this.marketingSuggestion = response.data.suggestion || "这款产品真的太棒了！分享给大家，绝对值得入手～ #好物分享 #小红书爆款";
          this.$message({
            message: '图片重新生成成功！',
            type: 'success',
            duration: 1500
          });
        } else {
          this.$message({
            message: response.msg || '图片处理失败',
            type: 'error',
            duration: 2000
          });
        }
      }).catch(error => {
        this.$message({
          message: '图片上传失败: ' + error.message,
          type: 'error',
          duration: 2000
        });
      }).finally(() => {
        this.regenerating = false;
      });
    },

    // 下载图片
    downloadImage() {
      if (!this.resultImageUrl) {
        this.$message({
          message: '没有可下载的图片',
          type: 'warning',
          duration: 1500
        });
        return;
      }

      const link = document.createElement('a');
      link.href = this.resultImageUrl;
      link.download = `小红书营销_${new Date().getTime()}.png`;
      link.click();

      this.$message({
        message: '图片下载中，请稍候...',
        type: 'success',
        duration: 1500
      });
    }
  }
};
</script>

<style scoped>
/* 小红书风格主题色 */
:root {
  --xiaohongshu-primary: #ff2442;
  --xiaohongshu-light: #fff0f3;
  --xiaohongshu-dark: #c01a2f;
  --gradient-start: #ff6b6b;
  --gradient-end: #ff2442;
  --card-bg: #fff9fa;
  --text-primary: #333;
  --text-secondary: #666;
}

/* 图片上传页面样式 */
.image-upload-page {
  padding: 15px 10px;
  max-width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #fdf5f6 0%, #ffffff 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text-primary);
}

/* 装饰元素 */
.decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.decoration-item {
  position: absolute;
  opacity: 0.1;
}

.heart {
  top: 10%;
  left: 5%;
  width: 30px;
  height: 30px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff2442"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center;
  background-size: contain;
  animation: float 15s infinite ease-in-out;
}

.star {
  top: 20%;
  right: 8%;
  width: 25px;
  height: 25px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff2442"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center;
  background-size: contain;
  animation: float 18s infinite ease-in-out;
  animation-delay: 2s;
}

.flower {
  bottom: 15%;
  left: 10%;
  width: 35px;
  height: 35px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff2442"><path d="M12 3C8.13 3 5 6.13 5 10c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/></svg>') no-repeat center;
  background-size: contain;
  animation: float 20s infinite ease-in-out;
  animation-delay: 4s;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* 头部区域样式 - 小红书风格 */
.header-section {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #fff9fa 0%, #ffffff 100%);
  padding: 18px 15px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(255, 36, 66, 0.15);
  border: 1px solid #ffe5e9;
  position: relative;
  z-index: 1;
  text-align: center;
  background-clip: padding-box;
}

.title {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(255, 36, 66, 0.1);
  position: relative;
  display: inline-block;
}

.title::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
  border-radius: 3px;
}

.desc {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 15px;
  text-align: center;
  padding: 0 10px;
  font-weight: 500;
}

/* 上传区域样式 */
.upload-section {
  background-color: #fff;
  padding: 25px 20px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 25px;
  border: 1px dashed #ffe5e9;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.upload-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gradient-start), transparent);
}

.upload-instruction {
  text-align: center;
  padding: 15px 0;
  color: var(--text-secondary);
  font-size: 14px;
  border-bottom: 1px dashed #f5f5f5;
  margin-bottom: 20px;
  position: relative;
}

.upload-instruction::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--xiaohongshu-light);
  border-radius: 1px;
}

.upload-instruction i {
  font-size: 28px;
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
  display: inline-block;
}

.instruction-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 8px 0;
  letter-spacing: 0.5px;
}

.sub-text {
  color: #999;
  font-size: 13px;
  margin-top: 5px;
  letter-spacing: 0.3px;
}

/* 上传容器 */
.upload-container {
  position: relative;
  margin: 15px 0;
}

/* 小红书风格上传按钮 */
.upload-demo .el-upload--drag {
  background: linear-gradient(135deg, #fff5f7 0%, #ffffff 100%);
  border: 2px dashed var(--gradient-start);
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(255, 36, 66, 0.08);
}

.upload-demo .el-upload--drag:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255, 36, 66, 0.15);
  border-color: var(--xiaohongshu-dark);
}

.upload-demo .el-upload--drag:hover .upload-icon-container i {
  animation: pulse 1.5s infinite;
}

.upload-icon-container {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(255, 36, 66, 0.2);
}

.upload-icon-container i {
  font-size: 28px;
  color: white;
  transition: transform 0.3s;
}

.pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.upload-text {
  text-align: center;
}

.upload-main-text {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.upload-sub-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 5px;
  font-weight: 500;
}

.upload-tips {
  margin-top: 20px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #fff9fa 0%, #ffffff 100%);
  border-radius: 12px;
  font-size: 14px;
  color: var(--xiaohongshu-dark);
  line-height: 1.5;
  border-left: 3px solid var(--gradient-start);
  display: flex;
  align-items: center;
}

.upload-tips i {
  margin-right: 8px;
  color: var(--gradient-start);
  font-size: 16px;
}

/* 图片预览区域样式 */
.image-preview-section {
  background: linear-gradient(135deg, #fff9fa 0%, #ffffff 100%);
  padding: 25px 20px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.image-preview-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gradient-start), transparent);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i {
  color: var(--gradient-start);
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

/* 小红书风格按钮 */
.regenerate-btn {
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  padding: 0;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(255, 36, 66, 0.2);
  transition: all 0.3s;
}

.regenerate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 36, 66, 0.3);
}

.download-btn {
  background: linear-gradient(135deg, #409eff 0%, #2c6df9 100%);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  padding: 0;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
  transition: all 0.3s;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(64, 158, 255, 0.3);
}

.image-container {
  text-align: center;
  margin-bottom: 25px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.image-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.glow-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 36, 66, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.glow-effect.active {
  opacity: 1;
}

.result-image {
  max-width: 100%;
  max-height: 350px;
  border-radius: 12px;
  background-color: #f8f8f8;
  transition: transform 0.3s;
}

.result-image:hover {
  transform: scale(1.02);
}

.image-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--text-secondary);
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 36, 66, 0.2);
  border-top: 3px solid var(--gradient-start);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.3s;
}

.preview-overlay:hover {
  opacity: 1;
}

/* 营销信息区域 */
.marketing-info {
  background-color: white;
  border-radius: 16px;
  padding: 20px;
  border-left: 4px solid var(--gradient-start);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.marketing-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
}

.info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gradient-start);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 15px;
}

.suggestion-container {
  position: relative;
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 15px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}

.suggestion-text {
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 15px;
  margin: 0;
  word-break: break-word;
  flex: 1;
  padding-right: 30px;
}

.copy-btn {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background: linear-gradient(135deg, #409eff 0%, #2c6df9 100%);
  color: white;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 5px rgba(64, 158, 255, 0.2);
}

.copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
}

/* 分享区域 */
.share-section {
  margin-top: 20px;
  text-align: center;
}

.share-text {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.xhs {
  background: linear-gradient(135deg, #ff2442 0%, #c01a2f 100%);
  color: white;
}

.xhs:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(255, 36, 66, 0.3);
}

.wechat {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: white;
}

.wechat:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(46, 204, 113, 0.3);
}

.weibo {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  color: white;
}

.weibo:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(230, 126, 34, 0.3);
}

/* 手机端提示 */
.mobile-tip {
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, #fff9fa 0%, #ffffff 100%);
  border-radius: 25px;
  font-size: 14px;
  color: var(--gradient-start);
  margin-top: 20px;
  border: 1px solid #ffe5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(255, 36, 66, 0.2); }
  70% { box-shadow: 0 0 0 10px rgba(255, 36, 66, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 36, 66, 0); }
}

/* 浮动元素 */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-element {
  position: absolute;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  border-radius: 50%;
  opacity: 0.15;
  animation: float-up 25s infinite linear;
}

@keyframes float-up {
  0% { transform: translateY(0) translateX(0); opacity: 0.15; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

/* 响应式调整 */
@media (min-width: 768px) {
  .image-upload-page {
    padding: 30px;
    max-width: 750px;
    margin: 0 auto;
  }

  .header-section {
    padding: 25px 20px;
  }

  .upload-section, .image-preview-section {
    padding: 30px 25px;
  }
}

/* 移动端优化 */
@media (max-width: 767px) {
  .action-buttons {
    width: 100%;
  }

  .regenerate-btn, .download-btn {
    width: 45px;
    height: 45px;
    flex: 1;
  }

  .upload-instruction p {
    font-size: 16px !important;
  }

  .result-image {
    max-height: 300px;
  }

  .suggestion-text {
    font-size: 14px;
  }
}

/* 小屏幕设备 */
@media (max-width: 480px) {
  .title {
    font-size: 20px;
  }

  .upload-main-text {
    font-size: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .result-image {
    max-height: 250px;
  }
}
</style>
